<!DOCTYPE html>
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@include file="../../../common/include/inc.jsp" %>
<head lang="en">
    <title>首页</title>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/pub-ui/css/default.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/bootstrap.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/page-styles.css"/>

</head>
<style>
    .ued-d1{
        background-image: url('${ctx}/resource/plugins/ued/images/pc.png');
        height: 13%;
        width: 10%;

    }
    .ued-d2{
        background-image: url('${ctx}/resource/plugins/ued/images/jq.png');
        height: 13%;
        width: 10%;
    }
    .ued-d3{
        background-image: url('${ctx}/resource/plugins/ued/images/yp.png');
        height: 13%;
        width: 10%;
    }
    .ued-d4{
        background-image: url('${ctx}/resource/plugins/ued/images/cpu.png');
        height: 13%;
        width: 10%;
    }
    .ued-d5{
        background-image: url('${ctx}/resource/plugins/ued/images/nc.png');
        height: 13%;
        width: 10%;
    }
</style>
<body style="background-color: #282c2d;min-width: 1368px">
<!--主要内容 begin-->
<div class="content c-width pd-5 pdt-0 " >
    <ul class="clearfix section-1">
        <li class="item-1" style="width: 26%">
            <%--资源总览--%>
            <div class="item-2-top position-rel" style="height: 40px">
                <span class="text-bg-1" style="color: #fff;">资源总览</span>
            </div>
            <div class="bd-grey item-2-map mgt-5" style="height: 300px;" id="">
            <ul class="item-3-main" style="padding-top: 17%;">
                <li class="text-bg-5"><span class="font-white">主机设备：</span></li>
                <li class="text-bg-6"><span class="font-white" id="hid">8990台</span></li>
                <li class="text-bg-5"><span class="font-white">网路设备：</span></li>
                <li class="text-bg-6"><span class="font-white" id="nid">78205台</span></li>
                <li class="text-bg-5"><span class="font-white">存储设备：</span></li>
                <li class="text-bg-6"><span class="font-white" id="sid">432423T</span></li>
                <li class="text-bg-5"><span class="font-white">安全设备：</span></li>
                <li class="text-bg-6"><span class="font-white" id="aid">8907台</span></li>
                <li class="text-bg-5"><span class="font-white">终端设备：</span></li>
                <li class="text-bg-6"><span class="font-white"id="tid">82901台</span></li>
            </ul>
            </div>
            <%--资源总览--%>


            <%--资源生命周期--%>
            <div class="item-2-top position-rel" style="height: 40px">
                <span class="text-bg-1" style="color: #fff;">资源生命周期</span>
            </div>
                <div class="bd-grey item-2-map mgt-5" style="height: 434px" id="left_in_echart"></div>
             <%--资源生命周期--%>


        </li>
        <li class="item-2 mgl-10 mgr-10" style="width: 40%;">
            <%--资源机房视图--%>
            <div class="item-2-top position-rel">
                <span class="text-bg-1" style="color: #fff">资源机房视图</span>
            </div>
            <div class="bd-grey item-2-map mgt-5" style="height: 779px;min-width: 514px" id="computerRoom" >

                <div style="margin-bottom: 15px"></div>
                </div>
            <%--资源机房视图--%>
        </li>

        <li class="item-3" style="width: 31%;">
            <%--资源消费概览--%>
            <div class="item-2-top position-rel">
                <span class="text-bg-1" style="color: #fff;">资源消费概览</span>
                <%--<a href="#"><span class="text-bg-2" style="color: rgb(46, 247, 226);">更多</span></a>--%>
            </div>

            <table height="300" width="100%"  style="border-collapse: collapse;border: 1px solid #2e75b6;margin-top: 5px;">
                <thead>
                <tr>
                    <td width="10%"><font color="#2ef7e2"></font></td>
                    <td height="36"><font color="#2ef7e2">分类</font></td>
                    <td width="40%"><font color="#2ef7e2">消费总量</font></td>
                </tr>
                </thead>
                <tbody id="consum">


                </tbody>
            </table>

            <%--资源消费概览--%>

            <%--IP段统计--%>
            <div class="item-2-top position-rel" >
                <span class="text-bg-1" style="color: #fff;">IP段统计</span>
                <%--<a href="#"><span class="text-bg-2" style="color: rgb(46, 247, 226);">更多</span></a>--%>
            </div>
            <table height="434" width="100%"  style="border-collapse: collapse;border: 1px solid #2e75b6;margin-top: 5px;">
                <thead>
                <tr>
                    <td width="10%"><font color="#2ef7e2"></font></td>
                    <td height="36"><font color="#2ef7e2">IP段</font></td>
                    <td ><font color="#2ef7e2">已使用</font></td>
                    <td><font color="#2ef7e2">空余</font></td>
                </tr>
                </thead>
                <tbody id="top5Tbody">

                <tr >
                    <td><span class="badge badge-info">1</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">2</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">3</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">4</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">5</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">6</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">7</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">8</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">9</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                <tr >
                    <td><span class="badge badge-info">10</span></td>
                    <td>192.168.0.1-192.168.0.255</td>
                    <td>232</td>
                    <td style="color: red">15</td>
                </tr>
                </tbody>
            </table>
            <%--IP段统计--%>
        </li>
        </ul>
    <ul class="clearfix section-1" style="margin-top: 317px;">
        <li  style="width: 50%;margin-top: 60px">
            <%--虚拟资源--%>
            <div class="item-2-top position-rel"   >
                <span class="text-bg-1" style="color: #fff;">虚拟资源</span>
            </div>
            <div class="bd-grey item-2-map mgt-5" style="height: 500px;width: 99%;">
                <div style="height: auto;margin-top: 6%;"></div>
                <div style="height: auto;margin-top:3%;">
                    <div style="background-color:#ffa800;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 10%;"><img src="${ctx}/resource/plugins/ued/images/jq.png" style="margin-right: 10px"/>宿主机集群</div>
                    <div id="colony" style="background-color:#39a6f9;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 7.5%;">1000</div>
                </div>
                <div style="height: auto;margin-top: 3%;">
                    <div style="background-color:#ffa800;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 10%;"><img src="${ctx}/resource/plugins/ued/images/pc.png" style="margin-right: 10px"/>&nbsp;宿&nbsp;&nbsp;&nbsp;主&nbsp;&nbsp;&nbsp;机</div>
                    <div id="pc" style="background-color:#39a6f9;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 7.5%;">1000</div>
                </div>
                <div style="height: auto;margin-top: 3%;">
                    <div style="background-color:#ffa800;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 10%;"><img src="${ctx}/resource/plugins/ued/images/yp.png" style="margin-right: 10px"/>&nbsp;存&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;储</div>
                    <div id="memory" style="background-color:#39a6f9;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 7.5%;">1000</div>
                </div>
                <div style="height: auto;margin-top: 3%;">
                    <div style="background-color:#ffa800;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 10%;"><img src="${ctx}/resource/plugins/ued/images/cpu.png" style="margin-right: 10px"/>处理器-cpu</div>
                    <div  id="cpu" style="background-color:#39a6f9;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 7.5%;">1000</div>
                </div>
                <div style="height: auto;margin-top: 3%;">
                    <div style="background-color:#ffa800;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 10%;"><img src="${ctx}/resource/plugins/ued/images/nc.png" style="margin-right: 10px"/>内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</div>
                    <div id="disk" style="background-color:#39a6f9;border-radius:6px 6px 6px 6px;line-height: 60px;width: 35%;font-size: 30px;float: left;margin-left: 7.5%;">1000</div>
                </div>


            </div>
        </li>
        <%--虚拟资源--%>

        <li  style="width: 50%;margin-top: 60px">
            <%--业务资源变更--%>
            <div class="item-2-top position-rel"   >
                <span class="text-bg-1" style="color: #fff;">业务资源变更</span>
            </div>
            <div class="bd-grey item-2-map mgt-5" style="height: 500px;width: 96%;" id="right_bottom_echart">
                <%--业务资源变更--%>

            </div>
        </li>
        </ul>
</div>

<!--主要内容 end-->
<script type="text/javascript" src="${ctx}/resource/plugins/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/circle-progress.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/system/index/homePage.js"></script>
</body>
</html>
